@charset "utf-8";
/* 1.声明样式表 css指定编码集：防止乱码 */
/* 2.通用的样式:所有元素去掉内外边距
     元素--盒模型中：内外边距+内容+边框
	                *元素默认自带外边距：body、h1~h6、p、ul/ol
	 ④通用选择器：选中所有元素添加【效果】样式
	 语法：*{默认需要效果}
 */
*{
	margin: 0;
	padding: 0;
	/* 字体属性 */
	font-family: "华文彩云";
	font-size: 80px;
}
body{
	/* 背景属性【复合属性：省去部分属性值】
	 background:image,size,position,repeat,color
	 常用简写：image size repeat;
	 用途：页面频繁改变位置的图片，与img元素固定在一个位置
	 子属性：background-color 背景颜色属性【二选一】
	        background-image 背景图片属性【二选一】
			                 属性值：url(路径)/url(""或'')
			background-size  背景尺寸属性
			                 属性值1个，属性值2个【推荐】
							 x轴【宽度】 Y轴【高度】
			background-repeat 背景平铺效果
			                  属性值：no-repeat 不平铺
	 */
	background: url(../img/bg.jpg);
	/* 背景尺寸属性 */
	background-size: 100% 800px;
	/* 背景平铺属性 */
	background-repeat: no-repeat;
}
/* 熊猫 */
.bear{
	width: 300px;
	height: 400px;
	/* 判断选择器是否选中 */
	bor der: 1px solid red;
	/* 背景图片 复合属性 */
	background: url(../img/bear_1.png);
	/* 出现背景图-背景图大于空间--设置背景尺寸 */
	background-size: 100% 100%;
	/* 相对定位 */
	position: relative;
	top: 36px;
	left: 0px;
	 animation: bear 10s linear infinite; 
}
/* 动画：1.写关键帧 2.元素添加动画，找到元素添加动画属性
         关键帧特点，在启动元素动画位置，继承父元素：定位、背景、空间
 */
@keyframes bear{
	/* 简单位移 */
	0%{/* 初始化 */
		top: 36px;
		left: 800px;
	}
	10%{
		top: 380px;
		left: 600px;
		background: url(../img/bear_1.png);
		/* 背景尺寸：背景空间与实际图片不符 */
		background-size: 100% 100%;
		
	}
	20%{
		top: 250px;
		left: 500px;
		background: url(../img/bear_2.png);
		background-size: 100% 100%;
	}
	30%{
		top: 218px;
		left: 300px;
		background: url(../img/bear_3.png);
		background-size: 100% 100%;
	}
	40%{
		top: 150px;
		left: 200px;
		background: url(../img/bear_4.png);
		background-size: 100% 100%;
	}
	50%{
		top: 50px;
		left: 100px;
		background: url(../img/bear_5.png);
		background-size: 100% 100%;
		transform: scale(1) rotate(400deg);
	}
	60%{
		top: 36px;
		left: 500px;
		background: url(../img/bear_6.png);
		background-size: 100% 100%;
	}
	70%{top: 200px;
		left: 500px;
		background: url(../img/bear_7.png);
		background-size: 100% 100%;
	}
	80%{
		top: 100px;
		left: 400px;
		background: url(../img/bear_8.png);
		background-size: 100% 100%;
	}
	90%{
		top: 60px;
		left: 300px;
		background: url(../img/bear_9.png);
		background-size: 100% 100%;
	}
	100%{
		top: 50px;
		left: 400px;
		background: url(../img/bear_10.png);
		background-size: 100% 100%;
		transform: scale(2);
	}
	
}